<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript" src="jquery-3.2.1.js"></script>
    <title>Document</title>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            background: #143C56;
            color: #fff;
        }
        
        ul,
        li {
            margin: 0;
            padding: 0;
        }
        
        h1 {
            margin: 20px auto;
            text-align: center;
        }
        
        .conten {
            width: 800px;
            height: 500px;
            border: 1px solid #fff;
            margin: 10px auto;
        }
        
        .left {
            width: 200px;
            border: 1px solid #000;
            height: 100%;
            float: left;
        }
        
        .right {
            width: 596px;
            border: 1px solid #fff;
            float: right;
            height: 100%;
            display: none;
            position: relative;
        }
        
        .conten .left ul {
            list-style: none;
        }
        
        .conten .left ul li {
            text-align: center;
            width: 198px;
            height: 80px;
            border: 1px solid #fff;
            line-height: 80px;
            cursor: pointer;
            background-color: orange;
            font-style: 900;
        }
        
        .conten .left ul li:hover {
            background-color: lightblue;
            color: red;
        }
        
        table {
            width: 596px;
            margin-top: 30px;
            border-collapse: collapse;
        }
        
        th,
        td {
            border: 1px solid #fff;
            text-align: center;
        }
        
        .right.active {
            display: block;
        }
        
        .clearfix:before,
        .clearfix:after {
            content: "";
            display: block;
        }
        
        .clearfix:after {
            /*在当前元素的最后添加一个伪元素*/
            clear: both;
        }
        
        input {
            width: 120px;
        }
        
        .btn-func {
            width: 124px;
            position: absolute;
            top: 310px;
            left: 50%;
            margin-left: -62px;
        }
        
        .btn-pri {
            width: 60px;
            height: 25px;
        }
        
        .btn-next {
            width: 60px;
            height: 25px;
        }
    </style>
    <script>
        // window.onload = function() {
        //         var div = document.getElementsByClassName("conten");
        //         var contents = document.getElementsByClassName("right");
        //         var lis = document.getElementsByTagName("li");
        //         console.log(lis);
        //         for (var i = 0; i < lis.length; i++) {
        //             //  console.log(lis[i]);
        //             lis[i].addEventListener("click", function(e) {
        //                 var active = document.getElementsByClassName("active");
        //                 active[0].className = "right";
        //                 var value = e.target.value;
        //                 contents[value - 1].className = "right active";
        //             }, false)
        //         }
        //     }
        $(function() {
            var div = $(".conten")
            var contents = $(".right");
            var lis = $("li");
            for (var i = 0; i < lis.length; i++) {
                $(lis[i]).on("click", function(e) {
                    var active = $(".active");
                    $(active).removeClass("active");
                    var value = $(this).attr("value");
                    $(contents[value - 1]).addClass("active");
                })
            }
            var todolists = [];
            var par1 = $(".par1");
            var par2 = $(".par2");
            var totalPage = 1;
            var page = 0;
            var pageCount = 10;
            var showlist = function(todolists) {
                par1.empty();
                for (var i = 0; i < todolists.length; i++) {
                    var tr = "<tr index=" + i + " _id=" + todolists[i]._id + "><td>" + todolists[i].name + "</td><td>" + todolists[i].date + "</td><td>" +
                        todolists[i].star + "</td><td>" + todolists[i].finish + "</td><td>" +
                        "<button class='btn-del'>删除</button>" +
                        "<button class='btn-alter'>修改</button>" + "</td></tr>";
                    var jTr = $(tr);
                    jTr.appendTo(par1);
                }
                // var showlist2 = function(todolists) {
                //     par2.empty();
                //     for (var i = 0; i < todolists.length; i++) {
                //         var tr = "<tr index=" + i + " _id=" + todolists[i]._id + "><td>" + todolists[i].name + "</td><td>" + todolists[i].date + "</td><td>" +
                //             todolists[i].star + "</td><td>" + todolists[i].finish + "</td></tr>";
                //         var jTr = $(tr);
                //         jTr.appendTo(par2);
                //     }
                //     添加删除按钮
                var btnDels = par1.find(".btn-del");
                btnDels.on("click", function(e) {
                    var btnDels = $(this);
                    var id = btnDels.parents("tr").attr("_id");
                    console.log(id);
                    $.ajax({
                        url: "/del",
                        method: "get",
                        data: {
                            id: id,
                            page: page,
                            pageCount: pageCount
                        },
                        success: function(data) {
                            showData(data);
                        }
                    })
                })
            };
            var showData = function(data) {
                if (data.status != 0) {
                    alert("数据库出错");
                } else {
                    totalPage = data.totalPage;
                    page = data.page;
                    if (data, data.length < 0) {
                        var noMessage = $(".no-message");
                        noMessage.show();
                    } else {
                        var noMessage = $(".no-message");
                        noMessage.hide();
                        showlist(data.data);
                    }
                }
            };
            // var finisData = function() {
            //     $.ajax({
            //         url: "/finishData",
            //         method: "get",
            //         data: {
            //             page: page,
            //             pageCount: pageCount
            //         },
            //         success: function(data) {
            //             showData(data);
            //         }
            //     })
            // };
            // finisData();

            var gettodolistData = function() {
                $.ajax({
                    url: "/gettodolistData",
                    method: "get",
                    data: {
                        page: page,
                        pageCount: pageCount
                    },
                    success: function(data) {
                        showData(data);
                    }
                })
            };
            gettodolistData();
            var btnAdd = $(".btn-add");
            btnAdd.on("click", function(e) {
                e.preventDefault();
                var newTodolist = {
                    name: $(".todo-name").val(),
                    date: $(".todo-date").val(),
                    star: $(".todo-star").val(),
                    finish: $(".todo-finish").val(),
                };
                $.ajax({
                    url: "/add",
                    method: "get",
                    data: {
                        newTodolist: newTodolist,
                        page: page,
                        pageCount: pageCount
                    },
                    success: function(data) {
                        lis.eq(0).trigger("click");
                        showData(data);

                    }
                })
            });
            var btnNext = $(".btn-next");
            btnNext.on("click", function() {
                page++;
                if (page >= totalPage) {
                    page = totalPage - 1;
                    alert("已经是最后一页");
                    return;
                }
                $.ajax({
                    url: "/gettodolistData",
                    method: "get",
                    data: {
                        page: page,
                        pageCount: pageCount
                    },
                    success: function(data) {
                        showData(data);
                    }
                })
            });
            var btnNext = $(".btn-pri");
            btnNext.on("click", function(e) {
                page--;
                if (page < 0) {
                    page = 0;
                    alert("已经是第一页");
                    return;
                }
                $.ajax({
                    url: "/gettodolistData",
                    method: "get",
                    data: {
                        page: page,
                        pageCount: pageCount
                    },
                    success: function(data) {
                        showData(data);
                    }
                })
            })
        })
    </script>
</head>

<body>
    <h1>Todolist</h1>
    <div class="conten">
        <div class="left">
            <ul class="clearfix">
                <li value="1">主页</li>
                <li value="2">新建任务</li>
                <li value="3">归档</li>
            </ul>
        </div>
        <div class="right active">
            <table>
                <thead>
                    <tr>
                        <th>任务名字</th>
                        <th>截至日期</th>
                        <th>重要程度</th>
                        <th>完成情况</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody class="par1"></tbody>
            </table>
            <div class="btn-func">
                <button class="btn-pri">上一页</button>
                <button class="btn-next">下一页</button>
            </div>
        </div>
        <div class="right">
            <table>
                <thead>

                    <tr>
                        <th>任务名字</th>
                        <th>截止日期</th>
                        <th>重要程度</th>
                        <th>完成情况</th>
                        <th>操作</th>
                    </tr>
                    <tr>
                        <th><input type="text" class="todo-name" /></th>
                        <th><input type="text" class="todo-date" /></th>
                        <th><input type="text" class="todo-star" /></th>
                        <th><input type="text" class="todo-finish" /></th>
                        <th><button class="btn-add">增加</button></th>
                    </tr>
                </thead>
            </table>
            <!-- for属性,说明label是针对哪个一个输入框的说明-->
            <form>

            </form>
        </div>
        <div class="right">
            <table>
                <thead>
                    <tr>
                        <th>任务名字</th>
                        <th>截至日期</th>
                        <th>重要程度</th>
                        <th>完成情况</th>
                    </tr>
                </thead>
                <tbody class="par2"></tbody>
            </table>
            <div class="no-message">没有数据</div>
            <div class="btn-func">
                <button class="btn-pri">上一页</button>
                <button class="btn-next">下一页</button>
            </div>
        </div>

    </div>
</body>

</html>